<template>
    <div>
        <div :style='{"padding":"12px","boxShadow":"0 0px 6px #ccc","margin":"0px auto","borderColor":"#fff","borderRadius":"0px","background":"linear-gradient(180deg, #eee 0%,  #eee 100%)","borderWidth":"1px 0 1px 0","width":"100%","borderStyle":"solid"}'
             class="breadcrumb-preview">
            <el-breadcrumb :separator="'Ξ'"
                           :style='{"width":"1200px","margin":"0 auto","fontSize":"14px","lineHeight":"1"}'>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item, index) in breadcrumbItem" :key="index">{{item.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div :style='{"padding":"12px","boxShadow":"0 0px 6px #ccc","margin":"0px auto","borderColor":"#fff","borderRadius":"0px","background":"linear-gradient(180deg, #eee 0%,  #eee 100%)","borderWidth":"1px 0 1px 0","width":"100%","borderStyle":"solid"}'
             class="breadcrumb-preview">
            <el-form :inline="true" :model="formSearch" class="list-form-pv"
                     style="justify-content: center;display: flex;">
                <div class="section-btn">
                    <el-form-item>
                        <el-input v-model="title" placeholder="标题"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="getNewsList(1)"><i class="el-icon-search"></i>查询</el-button>
                </div>
            </el-form>
        </div>

        <div class="news-preview"
             :style='{"width":"100%","padding":"20px 0 0","position":"relative","background":"none"}'>


            <!-- 样式五 -->
            <div class="list5 index-pv1"
                 :style='{"border":"1px solid #eee","padding":"20px","boxShadow":"0px 0px 0px #eee","margin":"0px auto 0 auto","overflow":"hidden","borderRadius":"4px","flexWrap":"wrap","background":"#fff","display":"flex","width":"1200px","justifyContent":"space-between","height":"auto"}'>
                <div :style='{"cursor":"pointer","padding":"0","boxShadow":"0px 0px 0px #ddd,inset 0px 0px 0px 0px #eee","margin":"0 0px 20px","borderRadius":"0","background":"#e6f5f6","display":"flex","width":"49%","position":"relative","height":"auto"}'
                     v-for="item in newsList" :key="item.id" @click="toNewsDetail(item)"
                     class="list-item animation-box">
                    <el-image
                            :style='{"width":"180px","objectFit":"cover","borderRadius":"0","display":"inline-block","height":"180px"}'
                            :src="baseUrl + item.picture" :fit="fill"></el-image>
                    <div class="item-info"
                         :style='{"width":"400px","padding":"10px","display":"inline-block","height":"auto"}'>
                        <div :style='{"whiteSpace":"nowrap","overflow":"hidden","color":"#333","lineHeight":"32px","fontSize":"14px","textOverflow":"ellipsis","fontWeight":"bold"}'
                             class="title ">{{item.title}}
                        </div>
                        <div :style='{"lineHeight":"24px","fontSize":"14px","overflow":"hidden","color":"#666","textIndent":"2em","height":"120px"}'
                             class="introduction ">{{item.introduction}}
                        </div>
                        <div :style='{"padding":"0 10px","color":"#fff","top":"0","left":"0","background":"url(http://codegen.caihongy.cn/20221123/1a2b6d8f56d94e28898be382aa1e1397.png) no-repeat center top","display":"block","width":"100%","fontSize":"14px","lineHeight":"32px","position":"absolute","height":"100%"}'
                             class="tags"></div>
                    </div>
                </div>
            </div>


            <el-pagination
                    background
                    class="pagination"
                    :pager-count="7"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    prev-text="<"
                    next-text=">"
                    :hide-on-single-page="true"
                    :layout='["total","prev","pager","next","sizes","jumper"].join()'
                    :total="total"
                    :style='{"padding":"0","margin":"20px auto","whiteSpace":"nowrap","color":"#333","width":"1200px","fontWeight":"500","order":"4"}'
                    @current-change="curChange"
                    @prev-click="prevClick"
                    @next-click="nextClick"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        //数据集合
        data() {
            return {
                baseUrl: this.$config.baseUrl,
                breadcrumbItem: [
                    {
                        name: '公告信息'
                    }
                ],
                newsList: [],
                total: 1,
                pageSize: 10, pageSizes: [10, 20, 30, 50],
                totalPage: 1,
                layouts: '',
                title: '',
            }
        },
        created() {
            this.getNewsList(1);
        },
        //方法集合
        methods: {
            getNewsList(page) {
                let params = {page, limit: this.pageSize};
                let searchWhere = {};
                if (this.title != '') searchWhere.title = '%' + this.title + '%';
                this.$http.get('news/list', {params: Object.assign(params, searchWhere)}).then(res => {
                    if (res.data.code == 0) {
                        this.newsList = res.data.data.list;
                        this.total = res.data.data.total;
                        this.pageSize = res.data.data.pageSize;
                        this.pageSizes = [this.pageSize, this.pageSize * 2, this.pageSize * 3, this.pageSize * 5];
                        this.totalPage = res.data.data.totalPage;
                    }
                });
            },
            curChange(page) {
                this.getNewsList(page);
            },
            prevClick(page) {
                this.getNewsList(page);
            },
            nextClick(page) {
                this.getNewsList(page);
            },
            toNewsDetail(item) {
                this.$router.push({path: '/index/newsDetail', query: {detailObj: JSON.stringify(item)}});
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .news-wrap {
        width: 1000px;
        margin: 0 auto;
    }

    .news-item {
        height: 200px;
        width: auto;
        margin-bottom: 30px;
        cursor: pointer;
    }

    .news-item-text {
        width: calc(100% - 215px);
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
    }

    .news-item-text-title {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .news-item-text-intro {
        font-size: 14px;
        color: #666;
    }

    .hide1 {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hide2 {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hide3 {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .index-pv1 .animation-box {
        transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
        z-index: initial;
    }

    .index-pv1 .animation-box:hover {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        transition: 0.3s;
        z-index: 1;
    }

    .index-pv1 .animation-box img {
        transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    .index-pv1 .animation-box img:hover {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        opacity: 0.75;
        transition: all 0.3s ease-in-out 0s;
    }

    .el-pagination /deep/ .el-pagination__total {
        margin: 0 10px 0 0;
        color: #666;
        font-weight: 400;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    .el-pagination /deep/ .el-pager .number {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #666;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #f4f4f5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number:hover {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #fff;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number.active {
        cursor: default;
        padding: 0 4px;
        margin: 0 5px;
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input {
        margin: 0 5px;
        width: 100px;
        position: relative;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 25px 0 8px;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
        cursor: pointer;
        color: #C0C4CC;
        width: 25px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .el-pagination /deep/ .el-pagination__jump {
        margin: 0 0 0 24px;
        color: #606266;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input {
        border-radius: 3px;
        padding: 0 2px;
        margin: 0 2px;
        display: inline-block;
        width: 50px;
        font-size: 14px;
        line-height: 18px;
        position: relative;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 3px;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }
</style>
